import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Divider, Drawer, Button, Radio, message } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TemplatePg = React.lazy(() => import('./templatePg'));
const AddFromP = React.lazy(() => import('./addFromP'));
const Automatic = React.lazy(() => import('./automatic'));
class ExtendRt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      value: 1,
      intellectualId: '',
    };
  }

  componentDidMount() {
    console.log(this.props);
    if (this.props.intellectualId) {
      this.setState({ intellectualId: this.props.intellectualId });
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onChange = e => {
    console.log('单选', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  templateData = val => {
    console.log('..', val);
    console.log(this.props);
    this.setState(
      {
        // visible: false,
      },
      () => {
        this.props.templateData(val);
      }
    );
  };

  addQus = arr => {
    this.setState(
      {
        // visible: false,
      },
      () => {
        if (arr.length) {
          this.props.templateData(arr);
          message.success('添加成功！');
        } else {
          message.error('添加项为空');
        }
      }
    );
  };

  addPoint = arr => {
    this.setState(
      {
        visible: false,
      },
      () => {
        this.props.templateData(arr);
      }
    );
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        xs: 24,
        sm: 3,
      },
      wrapperCol: {
        xs: 24,
        sm: 20,
      },
    };

    return (
      <span>
        {this.props.overall === 1 ? (
          <Icon
            onClick={this.showDrawer}
            type="drag"
            style={{ fontSize: 20, marginLeft: 10, cursor: 'pointer' }}
          />
        ) : null}
        {this.props.overall === 2 ? <Button onClick={this.showDrawer}>扩展相似句</Button> : null}

        <Drawer
          className="zdyset"
          destroyOnClose
          width="calc(100vw - 245px)"
          title={
            <span style={{ cursor: 'pointer' }} onClick={this.onClose} >
                <Icon type="arrow-left" style={{ marginRight: 20 }} />
              返回
            </span>
          }
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <div className={styles.der}>
            <div className={styles.flexxs}>
              <div>
                <Form layout="horizontal" className="ant" style={{ marginLeft: 20 }}>
                  <FormItem {...FormItemLayont}>
                    {getFieldDecorator('userName', {
                      initialValue: '',
                    })(
                      <div>
                        <span>扩展方式</span>
                        <RadioGroup
                          style={{ marginLeft: 30 }}
                          onChange={this.onChange}
                          value={this.state.value}
                        >
                          {/*<Radio value={1} style={{ marginLeft: 10 }}>*/}
                          {/*  自动推荐*/}
                          {/*</Radio>*/}
                          <Radio value={1} style={{ marginLeft: 10 }}>
                            从问题库中添加
                          </Radio>
                          <Radio value={2} style={{ marginLeft: 10 }}>
                            通过问题模版生成
                          </Radio>
                        </RadioGroup>
                      </div>
                    )}
                  </FormItem>
                  <FormItem {...FormItemLayont}>
                    {/* {this.state.value === 3 ? <TemplatePg templateData={this.templateData}></TemplatePg> : ''}
            {this.state.value === 2 ? <AddFromP></AddFromP> : ''} */}
                  </FormItem>
                </Form>
              </div>
              <div style={{ marginLeft: 20 }}>
                {this.state.value === 3 ? <TemplatePg templateData={this.templateData} /> : ''}
                {this.state.value === 2 ? <AddFromP addQuestions={arr => this.addQus(arr)} /> : ''}
                {this.state.value === 1 ? (
                  <Automatic
                    addPoint={arr => this.addPoint(arr)}
                    intellectualId={this.state.intellectualId}
                    questions={this.props.questions}
                  />
                ) : (
                  ''
                )}
              </div>
            </div>
          </div>
        </Drawer>
      </span>
    );
  }
}
export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(ExtendRt));
